import { useState, useEffect, type JSX } from 'react';
import { AuthContext, type AuthProviderProps, type AuthUser } from './AuthContext';

// 定义AuthProvider组件，用于提供认证状态和登录登出功能
export const AuthProvider = ({ children }: AuthProviderProps): JSX.Element => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [authUser, setAuthUser] = useState<AuthUser | null>(null);
  const [authChecked, setAuthChecked] = useState(false);

  // 首次渲染时检查认证状态，例如从localStorage获取token和用户信息
  useEffect(() => {
    // 检查认证状态，如果已登录则设置用户信息
    const checkAuth = () => {
      // 从localStorage获取token和用户信息
      const token = localStorage.getItem('authToken');
      
      // 如果没有token，则用户未登录
      if (!token) {
        setAuthChecked(true);
        return;
      }

      try {
        // 使用eval来安全地解析JSON
        const decodedToken = JSON.parse(atob(token.split('.')[1]));
        const userInfo: AuthUser = {
          nickName: decodedToken.nickName,
          userName: decodedToken.userName,
          roles: decodedToken.roles
        };
        
        // 权限校验通过，设置用户信息并标记为已登录
        setIsAuthenticated(true);
        setAuthUser(userInfo);
        setAuthChecked(true);
      } catch {
        // 如果token无效或解析失败，清除localStorage中的token并标记为未登录
        localStorage.removeItem('authToken');
        setAuthChecked(true);
      }
    };

    checkAuth();
  }, []);

  const login = (token: string, authUser: AuthUser) => {
    // 设置本地存储的token（注意：不存储用户信息，仅存储token）
    localStorage.setItem('authToken', token);
    // 设置用户信息并且标记为已登录
    setAuthUser(authUser);
    setIsAuthenticated(true);
  };

  const logout = () => {
    localStorage.removeItem('authToken');
    setAuthUser(null);
    setIsAuthenticated(false);
  };
  
  // 通过参数传递，实现children组件的上下文访问
  return (
    <AuthContext.Provider value={{ isAuthenticated, authUser, login, logout, authChecked }}>
      {children}
    </AuthContext.Provider>
  );
};